<template>
    <view>
		<!-- 搜索 -->
		<!-- https://ageapi.omwjhz.com:18888/v2/search?query=%E5%A5%A5%E7%89%B9%E6%9B%BC&page=1 -->
		<!-- 筛选 -->
		<!--genre 版本 -->
		<!--label 类型 -->
		<!--order 排序 -->
		<!--region 地区 -->
		<!-- season 季度 -->
		<!-- year 年份 -->
		<!-- status 状态 -->
		<!-- https://ageapi.omwjhz.com:18888/v2/catalog?genre=all&label=all&letter=all&order=all&region=all&resource=all&season=all&status=all&year=all&page=1&size=10 -->
		<!-- 全部动漫目录 -->
		<!-- 跨端可以使用uni-ui的uni-list组件,在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。-->
		<view class="status_bar" :style="{height: ststusBarHeight + 'px'}"></view>
		<!-- 列表 -->
		<view :border="false" class="uni-margin-warp age-list" ref="container">
			<uni-list-item direction="row" v-for="video,index in videoList" :key="video.id" :custom-style="itemStyle">
				<template v-slot:header>
					<view class="age-padding">
						<image :src="video.cover" style="width: 210rpx; height: 280rpx;"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="uni-flex uni-column age-body">
						<text class="age-body-title" singleline="true">{{video.name}}</text>
						<text class="age-body-intro" style="margin-top: 15rpx;">动画种类：{{video.type}}</text>
						<text class="age-body-intro">播放状态：{{video.status}}</text>
						<text class="age-body-intro">原作：{{video.writer}}</text>
						<text class="age-body-intro">剧情类型：{{video.tags}}</text>
						<view class="age-btn uni-flex uni-center" @click="navtoDetail(video)">
							<text style="color: white; font-size: 24rpx; line-height: 24rpx;">点击播放</text>
						</view>
					</view>
				</template>
			</uni-list-item>
		</view>
		<!-- 这里目录层级在列表上方 -->
		<view class="age-category-bg">
			<view class="uni-margin-warp uni-flex uni-padding-warp age-category">
				<image style="width: 30rpx; height: 30rpx;" src="../../../static/category.png"></image>
				<view style="margin-left: 10rpx;" class="uni-flex uni-center">
					<text class="age-title">动漫列表</text>
				</view>
				<view class="uni-flex uni-center" style="position: absolute; right: 85rpx;">
					<text class="age-title">共</text><text class="age-title" style="color: #FF8C00;">{{total}}</text><text class="age-title">部</text>
				</view>
				<view class="uni-flex uni-center">
					<uni-icons type="bars" size="25" :color="filterBtnColor" style="position: absolute; right: 25rpx;" @click="filterAction()"></uni-icons>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadstatus" @clickLoadMore="loadData()" icon-type="auto" :content-text="contentText"></uni-load-more>
		<!-- 筛选框 -->
		<!-- 在uni-popup的蒙版上添加@touchmove.stop.prevent，禁止蒙版下的页面滚动 -->
		<!-- 注意：这样蒙版上的内容也无法滚动了 -->
		<!--  蒙版上的内容要滚动可以使用scrollview-->
		<uni-popup ref="popup">
			<view class="uni-common-dark uni-flex uni-column popup-content">
				<view v-for="item in filterdata" class="uni-column uni-flex">
					<text class="age-title uni-padding-warp uni-common-mt">{{item.category_cn}}</text>
					<view :style="{overflowX: item.content.length > 5 ?  'auto' : 'hidden'}">
						<view class="uni-flex uni-row uni-padding-warp" :style="{width: item.content.length > 5 ? item.content.length * 145 + 'rpx' : '100%'}">
							<view v-if="item.content.length > 5" class="uni-flex">
							<!-- 使用scrollview横向滚动要添加scroll-x="true",white-space: nowrap;并且scrollview内的页面要display:inline-xxx -->
								<scroll-view class="uni-flex uni-row" scroll-x="true" style="height: 60rpx; width: 720rpx; white-space: nowrap;">
									<view class="filterLabel uni-center" v-for="content,index in item.content" @click="selectedFilter(item,index)" :style="{backgroundColor: item.colors[index],display:'inline-flex'}">
										<text class="age-title">{{content}}</text>
									</view>
								</scroll-view>
							</view>
							<view v-else class="uni-flex">
								<view class="uni-flex uni-center filterLabel" v-for="content,index in item.content" @click="selectedFilter(item,index)" :style="{backgroundColor: item.colors[index]}">
									<text class="age-title">{{content}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-row uni-center" style="width: 100%; height: 100rpx; margin-top: 80rpx;">
					<view class="cancel uni-flex uni-center" @click="resetAction()">
						<text class="age-title">重置</text>
					</view>
					<view class="sure uni-flex uni-center" @click="sureAction()">
						<text class="age-title">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- loading -->
		<ageloading ref="loading" color="transparent" timeout="5000"></ageloading>
	</view>
</template>

<script>
	import ageloading from "@/pages/component/loading/age-loading.vue"
    export default {
		components: {
			ageloading
		},
        data() {
            return {
                itemStyle:{padding:'10rpx',backgroundColor: 'rgb(32, 32, 32)'},
				ststusBarHeight: 80,
				genre: "all",
				label: "all",
				order: "all",
				region: "all",
				year: "all",
				status: "all",
				size: 10,
				page: 1,
				videoList: [],
				total: 0,
				loadstatus:'more',
				contentText: {
					contentdown: '点击查看下一页',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				searchInfo:"",
				filterdata:[{"category_cn":"地区","content":["全部","日本","中国","欧美"],"colors":["rgb(52, 120, 246)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)"],"category_en":"region"},
				{"category_cn":"年份","content":["全部","2024","2023","2022","2021","2020","2019","2018","2017","2016","2015","2014","2013","2012","2011","2010","2009","2008","2007","2006","2005","2004","2003","2002","2001","2000之前"],"category_en":"year","colors":["rgb(52, 120, 246)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)",,"rgb(56, 56, 56)","rgb(56, 56, 56)"]},
				{"category_cn":"版本","content":["全部","TV","剧场版","OVA"],"colors":["rgb(52, 120, 246)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)"],"category_en":"genre"},
				{"category_cn":"状态","content":["全部","连载","完结","未播放"],"colors":["rgb(52, 120, 246)","rgb(56, 56, 56)","rgb(56, 56, 56)","rgb(56, 56, 56)"],"category_en":"status"}],
				selectedRegion:"",
				selectedYear:"",
				selectedGenre:"",
				selectedStatus:"",
				filterBtnColor:'#FFF'//#FF8C00
            }
        },
        methods: {
			navtoDetail(video) {
				uni.navigateTo({
					url: '/pages/animeDetailPage/animeDetailPage'+ `?id=${video.id.toString()}`
				})
			},
			loadData() {
				// this.ststusBarHeight = 2 * (uni.getSystemInfoSync().statusBarHeight + 5);
				this.ststusBarHeight = 10;
				const vm = this;
				this.loadstatus = 'loading'
				if(this.genre == '全部' || this.genre == '') {
					this.genre = 'all'
				}
				
				if(this.region == '全部' || this.region == '') {
					this.region = 'all'
				}
				
				if(this.year == '全部' || this.year == '') {
					this.year = 'all'
				}
				
				if(this.status == '全部' || this.status == '') {
					this.status = 'all'
				}
				//https://ageapi.omwjhz.com:18888/
				let urlStr = vm.$myGlobalUrl + `/v2/catalog?genre=${vm.genre}&label=${vm.label}&order=${vm.order}&region=${vm.region}&year=${vm.year}&status=${vm.status}&page=${vm.page}&size=${vm.size}`
				console.log(encodeURI(urlStr))
				uni.request({
					url: encodeURI(urlStr),
					method:"GET",
					timeout: 5000,
					success(res) {
						console.log(res);
						if(vm.page == 1) {
							vm.videoList = res.data['videos'];
						} else {
							vm.videoList = vm.videoList.concat(res.data['videos']);
						}
						vm.total = res.data['total'];
						vm.$refs.loading.close();
						if (vm.page * vm.size >= vm.total) {
							vm.loadstatus = 'nomore'
						} else {
							vm.loadstatus = 'more'
						}
						vm.page = vm.page + 1;
					},
					fail() {
						uni.showToast({
							title:'数据请求失败！'
						})
						vm.$refs.loading.close();
					}
				})
			},
			filterAction() {
				this.$refs.popup.open('bottom')
			},
			selectedFilter(item,index) {
				console.log(item)
				console.log(index)
				// 改变选中的颜色数据
				item.colors.forEach((colorItem, i) => {
					if(i == index) {
						item.colors.splice(i,1,'rgb(52, 120, 246)')
					} else {
						item.colors.splice(i,1,'rgb(56, 56, 56)')
					}
				})
				let content = item.content[index]
				if(item.category_en == 'region') {
					
					this.selectedRegion = content
					
				} else if (item.category_en == 'year') {
					
					this.selectedYear = content
					
				} else if (item.category_en == 'genre') {
					
					this.selectedGenre = content
					
				} else if (item.category_en == 'status') {
					
					this.selectedStatus = content
				}
			},
			sureAction() {
				// 点击确定
				this.region = this.selectedRegion
				this.year =  this.selectedYear
				this.genre = this.selectedGenre
				this.status = this.selectedStatus
				
				if(this.region.length > 0 || this.year.length > 0 || this.genre.length > 0 || this.status.length > 0) {
					this.filterBtnColor = '#FF8C00'
				} else {
					this.filterBtnColor = '#FFF'
				}
				
				this.$refs.popup.close()
				this.page = 1
				this.$refs.loading.show()
				this.loadData()
				
				uni.pageScrollTo({
					scrollTop:0,
					duration:100
				})
			},
			resetAction() {
				// 颜色数据重置
				this.filterdata.forEach((item,i)=> {
					item.colors.forEach((colorItem, idx) => {
						if(idx == 0) {
							item.colors.splice(idx,1,'rgb(52, 120, 246)')
						} else {
							item.colors.splice(idx,1,'rgb(56, 56, 56)')
						}
					})
				})
								
				this.selectedRegion = ""
				this.selectedYear = ""
				this.selectedGenre = ""
				this.selectedStatus = ""
				this.region = "all"
				this.year =  "all"
				this.genre = "all"
				this.status = "all"
				
				this.filterBtnColor = '#FFF'
				
				this.$refs.popup.close()
				this.page = 1
				this.$refs.loading.show()
				this.loadData()
				
				uni.pageScrollTo({
					scrollTop:0,
					duration:100
				})
			},
			searchAction() {
				const vm = this
				//https://ageapi.omwjhz.com:18888/
				uni.request({
					url:vm.$myGlobalUrl + `/v2/search?query=${this.searchInfo}&page=1`,
					success(res) {
						let data = res.data['data']
						console.log(data)
						vm.videoList = data['videos'];
						vm.total = data['total'];
						vm.loadstatus = 'nomore'
					},
					fail() {
						uni.showToast({
							title:'搜索失败',
							
						})
					}
				})
			},
			movehandle(e) {
				console.log(e)
				console.log(e.preventDefault)
				e.preventDefault
			}
        },
		mounted() {
			this.loadData()
			
		},
		onNavigationBarSearchInputChanged(data) {
			console.log(data['text'])
			this.searchInfo = data['text']
		},
		onNavigationBarSearchInputConfirmed() {
			if(this.searchInfo.length == 0) {
				this.page = 1
				this.loadData()
			} else {
				this.searchAction()
			}
			
			uni.hideKeyboard()
		}
    }
</script>
<style>
	@import "../../../common/uni-nvue.css";
	
    .status_bar {
		/* 吸顶效果 */
		position: fixed;
		left: 0%;
		right: 0%;
		top: 0%;
		background-color: rgb(48, 48, 48);
    }
	.age-category {
		background-color: rgb(32, 32, 32);
		height: 80rpx;
		align-items: center;
		border: 1rpx solid rgb(32, 32, 32);
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		border-bottom: 1rpx solid gray;
		margin-top: 10rpx;
	}
	.age-category-bg {
		position: fixed;
		height: 90rpx;
		top: 0%;
		left: 0%;
		right: 0%;
		background-color: rgba(48, 48, 48, 1);
	}
	.age-list {
		margin-top: 95rpx;
	}
	.age-padding {
		padding: 16rpx;
	}
	.age-body {
		padding: 16rpx 0rpx;
	}
	.age-body-title {
		max-width: 480rpx;
		font-size: 32rpx; 
		line-height: 32rpx;
		font-weight: bold; 
		color: white;
	}
	.age-body-intro {
		font-size: 24rpx;
		line-height: 24rpx;
		color: white;
		margin-top: 10rpx;
	}
	
	.age-btn {
		margin-top: 30rpx; 
		width: 140rpx; 
		height: 50rpx; 
		border: 1rpx solid transparent;
		border-radius: 25rpx;
		background-color: rgb(52, 120, 246);	
		transition: transform 10s;
	}
	.age-btn:active {
		background-color: rgba(52, 120, 246, 0.6);
	}
	
	.pop {
		position: fixed;
		background-color: rgba(48, 48, 48,0.3);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.popup-content {
		/* position: fixed;
		left: 0;
		right: 0;
		bottom: 0; */
		width: 100%;
		height: 700rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	
	.filterLabel {
		position: relative; 
		width: 135rpx; 
		height: 40rpx; 
		background-color: rgb(56, 56, 56); 
		margin-left: 10rpx; 
		margin-top: 10rpx; 
		white-space: nowrap; 
		border: 1rpx solid rgb(56, 56, 56); 
		border-radius: 5rpx;
	}
		
	/* 不显示滚动条 */
	::-webkit-scrollbar {
		display: none;
	}
	
	.cancel {
		width: 200rpx;
		height: 60rpx;
		background-color: transparent;
		border: 1rpx solid white;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		border-right: 0rpx;
	}
	
	.cancel:active {
		opacity: 0.6;
	}
	
	.sure {
		width: 200rpx;
		height: 60rpx;
		background-color: rgb(52, 120, 246);
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		border: 1rpx solid rgb(52, 120, 246);
	}
	
	.sure:active {
		opacity: 0.6;
	}
	
	.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
	
</style> 